<template>
	<view>
		<view class="search-cell suspended-top">
			<view class="search-item">
				<view class="screen-btn" @click="orderSort"><text>排序</text><label class="iconfont icon-ym-paixu"></label></view>
				<view class="screen-btn" @click="cucreen"><text>筛选</text><label class="iconfont icon-ym-shaixuan"></label></view>
			</view>
		</view>
		<view class="search-input "><label class="iconfont icon-sousuo" /><input type="text" confirm-type="search" v-model="search"
			 @confirm="searchEvent" class="font-size24" placeholder="搜索" /></view>
		<scroll-view class="content" scroll-y @scrolltolower="scrollButtonClick" id="height" :style="'height:' + height + 'px ;'">
			<view class="jn-grid-list">
				<view class="jn-staff-list-cell">
					<uni-swipe-action>
						<uni-swipe-action-item v-for="(item,index) in orderList" :options="options" :key="index" @click="removeDetils(item,index)">
							<view class="item" @click.stop="process(item)">
								<view class="jn-item-cell">
									<view class="jn-list-cell head">
										<view class="jn-item-cell-title-left">
											<view class="font-size32 color-3A3A3A">{{item.F_CustomerName}}</view>
										</view>
									</view>
									<view class="jn-list-cell cell">
										<view class="jn-item-cell-left">
											<view class="color-9A9A9A">{{item.F_OrderCode}}</view>
										</view>
										<view class="jn-item-cell-right">
											<view :class="item.Status.statecss">{{item.Status.text}}</view>
										</view>
									</view>
									<view class="jn-list-cell cell">
										<view class="jn-item-cell-left">
											<view class="color-9A9A9A">{{item.F_SalesmanName}}</view>
										</view>
										<view class="jn-item-cell-right">
											<view class="color-9A9A9A">{{item.F_CreatorTime}}</view>
										</view>
									</view>
								</view>
							</view>
						</uni-swipe-action-item>
					</uni-swipe-action>
				</view>
			</view>
			<view class="noContent" v-show="isNoData">
				<img :src="nodata" alt="">
				<view class="">
					暂无数据
				</view>
			</view>
		</scroll-view>
		<!-- 底部新增按钮 -->
		<uni-fab :pattern="pattern" :horizontal="horizontal" :vertical="vertical" :direction="direction" @creqateopen="creqateopen"></uni-fab>
		<!-- 排序 -->
		<uni-popup type="top" mode="insert" :mask-click="true" ref="popup">
			<view class="popup-box">
				<view class="staff" @tap="billAsc">
					<view class="staffinfo border-bottom-E3E3E5" hover-class="uni-list-cell-hover">
						<view class="staffname"></text><label>单据升序</label></view>
						<view class="advanceicon">
							<radio value="1" :checked="isBillAsc" />
						</view>
					</view>
				</view>
				<view class="staff" @tap="billDesc">
					<view class="staffinfo border-bottom-E3E3E5" hover-class="uni-list-cell-hover">
						<view class="staffname"></text><label>单据降序</label></view>
						<view class="advanceicon">
							<radio value="2" :checked="isBillDesc" />
						</view>
					</view>
				</view>
				<view class="staff" @tap="dateAsc">
					<view class="staffinfo border-bottom-E3E3E5" hover-class="uni-list-cell-hover">
						<view class="staffname"><label>日期升序</label></view>
						<view class="advanceicon">
							<radio value="3" :checked="isDateAsc" />
						</view>
					</view>
				</view>
				<view class="staff" @tap="dateDesc">
					<view class="staffinfo border-bottom-E3E3E5" hover-class="uni-list-cell-hover">
						<view class="staffname"></text><label>日期降序</label></view>
						<view class="advanceicon">
							<radio value="4" :checked="isDateDesc" />
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 筛选 -->
		<uni-popup type="top" mode="insert" :mask-click="true" ref="cucreen">
			<view class="popup-box">
				<view class="formlist inputtext" @tap="startDate">
					<view class="formgroup border-bottom-E3E3E5">
						<view class="labletitle"><label>起始日期</label></view>
						<view class="controlvalue">
							<input type="text" v-model="queryJson.startTime" name="startTime" placeholder="选择" disabled="true" />
						</view>
						<view class="advanceicon iconfont icon-xiangyou"></view>
					</view>
				</view>
				<view>
					<picker-view v-if="isStartVis" :indicator-style="indicatorStyle" :value="dateValue" @change="startDateChange">
						<picker-view-column>
							<view class="picker-item" v-for="(item,index) in years" :key="index">{{item}}年</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker-item" v-for="(item,index) in months" :key="index">{{item}}月</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker-item" v-for="(item,index) in days" :key="index">{{item}}日</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="formlist inputtext" @tap="endDate">
					<view class="formgroup border-bottom-E3E3E5">
						<view class="labletitle"><label>结束日期</label></view>
						<view class="controlvalue">
							<input type="text" v-model="queryJson.endTime" name="endTime" placeholder="选择" disabled="true" />
						</view>
						<view class="advanceicon iconfont icon-xiangyou"></view>
					</view>
				</view>
				<view>
					<picker-view v-if="isEndVis" :indicator-style="indicatorStyle" :value="dateValue" @change="endDateChange">
						<picker-view-column>
							<view class="picker-item" v-for="(item,index) in years" :key="index">{{item}}年</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker-item" v-for="(item,index) in months" :key="index">{{item}}月</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker-item" v-for="(item,index) in days" :key="index">{{item}}日</view>
						</picker-view-column>
					</picker-view>
				</view>
				<!-- <view class="formlist inputtext">
					<view class="formgroup">
						<view class="labletitle"><label>订单状态</label></view>
						<view class="controlvalue">
							<radio-group @change="radioChange">
								<label class="radio" v-for="(item, index) in items" :key="item.value">
									<radio :value="item.value" :checked="index === current" />{{item.name}}
								</label>
							</radio-group>
						</view>
					</view>
				</view> -->
				<view class="flow-button">
					<button class="btn-same btn-keep" @tap="reset">重置</button>
					<button class="btn-same btn-submit" @tap="retrieval" hover-class="com-hover-btn">检索</button>
				</view>
			</view>
		</uni-popup>
		<!-- 底部编辑，提交弹窗 -->
		<!-- <uni-popup type="bottom" mode="insert" :mask-click="true" ref="process">
			<view class="uni-share">
				<view class="uni-share-content">
					<view class="uni-share-content-image" v-for="item,index in processData" :key="index" >
						<text @click="jub(item)">{{item.text}}</text>
					</view>
					<text class="uni-share-content-text"></text>
				</view>
				<text class="uni-share-btn" @click="cancel('share')">取消</text>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import helper from '@/common/js/helper.js'
	import config from '@/common/js/config.js'
	import jnpf from '@/common/js/jnpf.js'
	import uniFab from '@/components/uni-fab/uni-fab.vue'
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import {
		initPicker,
		initDays
	} from "@/common/util.js";
	let orderUrl = '/api/WorkFlowForm/CrmOrder'
	export default {
		components: {
			uniFab,
			uniSwipeAction,
			uniSwipeActionItem,
			uniPopup
		},
		data() {
			return {
				status:null,
				processData:[{
					text:'编辑',
					status: "edit"
				},{
					text:'提交审核',
					status: "submit"
				}],
				search: '',
				rows: 10,
				page: 1,
				total: 1,
				height: 0,
				orderList: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: "#007AFF"
				},
				isBillAsc: false,
				isBillDesc: false,
				isDateAsc: false,
				isDateDesc: false,
				current: 0,
				items: [{
						value: '',
						name: '全部'
					},
					{
						value: '1',
						name: '正常',
						checked: 'true'
					},
					{
						value: '0',
						name: '作废'
					},
				],
				years: [],
				months: [],
				days: [],
				dateValue: [],
				visible: true,
				isStartVis: false,
				isEndVis: false,
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				queryJson: {
					keyword: '',
					startTime: '',
					endTime: '',
					enabledMark: ""
				},
				isNoData: false,
				nodata: config.Resources.message.nodata,
				F_Id: null,
			}
		},
		// computed: {
		// 	orders: function() {
		// 		let search = this.search;
		// 		let orderList = this.orderList;
		// 		if (search) {
		// 			return orderList.filter(function(product) {
		// 				return Object.keys(product).some(function(key) {
		// 					return String(product[key]).toLowerCase().indexOf(search) > -1
		// 				})
		// 			})
		// 		}
		// 		return orderList
		// 	}
		// },
		
		onBackPress(e){
			/* 删除缓存 */
			uni.removeStorageSync("listTitle")
		},
		
		onLoad() {
			uni.removeStorageSync('type')
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			setTimeout(function () {
			    uni.hideLoading();
			}, 2000);
			this.dateValue = helper.newdefaultVal('date');
			const data = initPicker(helper.getDateYear('start'), helper.getDateYear('end'), "date", 1);
			this.years = data.years;
			this.months = data.months;
			this.days = data.days;
		},
		onShow() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			setTimeout(function () {
			    uni.hideLoading();
			}, 2000);
			/* 动态修改标题 */
			let title = uni.getStorageSync("title");
			uni.setNavigationBarTitle({
				title:title.F_FullName
			});
			this.orderList.length = 0;
			this.init();
			this.isNoData=false;
			this.$forceUpdate();
		},
		methods: {
			// jub(item){
			// 	// console.log(item,this.F_Id)
			// 	let flowInfo = {
			// 		operstate: 'add',
			// 		id: this.F_Id,
			// 	}
				
			// 	// console.log(this.orderList)
			// 	if(item.status == "edit"){
			// 		uni.navigateTo({
			// 			url: './form?id=' + flowInfo.id+"&status="+item.status
			// 		})
			// 		this.cancel()
			// 	}else if(item.status == "submit"){
			// 		let _url = './form?id=' + flowInfo.id+"&status=" + item.status;
			// 		if(this.status == 4 || this.status == 3){
			// 			_url = './formNew?id=' + flowInfo.id+"&status=" + item.status
			// 		}
			// 		uni.navigateTo({
			// 			url: _url
			// 		})
			// 		this.cancel()
			// 	}
			// },
			
			
			
			init() {
				helper.ajax({
					url: orderUrl,
					method: 'GET',
					data: {
						pageSize: this.rows, //每页行数
						currentPage: 1, //当前页
					},
					success: res => {
						this.page = 1;
						let _total = Math.ceil(res.data.data.pagination.total/res.data.data.pagination.pageSize)
						this.total = _total;
						let order = res.data.data.list;
						// console.log(order)
						this.isNoData = order.length > 0 ? false : true;
						for (let i = 0; i < order.length; i++) {
							
							this.orderList.push({
								'F_Id': order[i].id,
								'F_OrderCode': order[i].orderCode,
								'F_CustomerName': order[i].customerName,
								'F_SalesmanName': order[i].salesmanName,
								'F_CreatorUserId': order[i].creatorUser,
								'F_CreatorTime': helper.toDate(order[i].orderDate, "yyyy-MM-dd"),
								'Status': helper.flowStatus(order[i].currentState),
								'StatusCode': order[i].currentState,
							})
						}
						
					}
				});
			},
			
			/* 触底事件 */
			scrollButtonClick() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				if (this.total > this.page) {
					this.page += 1;
					//触发求
					helper.ajax({
						url: orderUrl,
						method: 'GET',
						data: {
							pageSize: this.rows, //每页行数
							currentPage: this.page, //当前页
						},
						success: res => {
							let _total = Math.ceil(res.data.data.pagination.total/res.data.data.pagination.pageSize)
							this.total = _total;
							let order = res.data.data.list;
							for (let i = 0; i < order.length; i++) {
								this.orderList.push({
									'F_Id': order[i].id,
									'F_OrderCode': order[i].orderCode,
									'F_CustomerName': order[i].customerName,
									'F_SalesmanName': order[i].salesmanName,
									'F_CreatorUserId': order[i].creatorUser,
									'F_CreatorTime': helper.toDate(order[i].orderDate, "yyyy-MM-dd"),
									'Status': helper.flowStatus(order[i].currentState),
								})
							}
						}
					});
				}
				uni.hideLoading();
			},
			
			/* 点击跳转 */
			process(item) {
				// console.log("点击列表",item)
				/* 保存顶部标题 */
				uni.setStorageSync("listTitle",item.F_CustomerName)
				this.status = item.StatusCode
				// console.log("状态码:",this.status)
				this.F_Id = item.F_Id
				let flowInfo = {
					operstate: 'add',
					id: item.F_Id,
				}
				if(item.StatusCode == null || item.StatusCode == 3 || item.StatusCode == 4){
					// this.$refs.process.open();
					this.F_Id = item.F_Id
					uni.navigateTo({
						url: './form?id=' + flowInfo.id+"&status="+item.status
					})
					return;
				}
				uni.navigateTo({
					url: './formNew?id=' + flowInfo.id+"&status="+item.StatusCode
				})
			},
			
			/* 删除列表 */
			removeDetils(item, index) {
				if(item.StatusCode == 1){
					helper.msg("流程正在审核,请勿删除");
					return;
				}
				helper.ajax({
					url: orderUrl + '/'+item.F_Id,
					method: 'Delete',
					success: res => {
						this.orderList.splice(index, 1);
						if(this.orderList.length == 0){
							this.isNoData = true
						}
						helper.msg(res.data.msg, 'success');
					}
				});
			},
			/* 点击添加 */
			creqateopen() {
				uni.navigateTo({
					url: './form'
				})
			},
			/* 排序 */
			orderSort() {
				this.$refs.popup.open();
			},
			/* 筛选 */
			cucreen() {
				this.$refs.cucreen.open();
			},
			/* 流程选择取消事件 */
			cancel() {
				this.$refs.process.close()
			},
			/* 开始时间 */
			startDateChange(e) {
				const val = e.detail.value
				this.days = initDays(this.years[val[0]], this.months[val[1]]);
				this.queryJson.startTime = this.years[val[0]] + '-' + this.months[val[1]] + '-' + this.days[val[2]]
			},
			/* 结束时间 */
			endDateChange(e) {
				const val = e.detail.value
				this.days = initDays(this.years[val[0]], this.months[val[1]]);
				this.queryJson.endTime = this.years[val[0]] + '-' + this.months[val[1]] + '-' + this.days[val[2]]
			},
			startDate() {
				this.isStartVis = true;
				this.queryJson.startTime = this.years[this.dateValue[0]] + '-' + this.months[this.dateValue[1]] + '-' + this.days[
					this.dateValue[2]];
			},
			endDate() {
				this.isEndVis = true;
				this.queryJson.endTime = this.years[this.dateValue[0]] + '-' + this.months[this.dateValue[1]] + '-' + this.days[
					this.dateValue[2]];
			},
			/* 单选 */
			radioChange(evt) {
				this.queryJson.enabledMark = evt.detail.value;
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
			},
			/* 重置 */
			reset() {
				this.queryJson.enabledMark = "";
				this.queryJson.startTime = "";
				this.queryJson.endTime = "";
				this.isEndVis = false;
				this.isStartVis = false;
				this.current = 0;
			},
			/* 检索 */
			retrieval() {
				this.$refs.cucreen.close();
				let form = {
					pageSize: this.rows, //每页行数
					currentPage: 1, //当前页
				}
				if(this.queryJson.startTime){
					form.startTime = Date.parse(this.queryJson.startTime);
				}
				if(this.queryJson.endTime){
					form.endTime = Date.parse(this.queryJson.endTime);
				}
				if(this.queryJson.enabledMark){
					form.enabledMark = this.queryJson.enabledMark;
				}
				
					// console.log("retrieval")
				helper.ajax({
					url: orderUrl,
					method: 'GET',
					data: form,
					success: res => {
						this.page = 1;
						let _total = Math.ceil(res.data.data.pagination.total/res.data.data.pagination.pageSize)
						this.total = _total;
						let order = res.data.data.list;
						this.orderList.splice(0);
						for (let i = 0; i < order.length; i++) {
							this.orderList.push({
								'F_Id': order[i].id,
								'F_OrderCode': order[i].orderCode,
								'F_CustomerName': order[i].customerName,
								'F_SalesmanName': order[i].salesmanName,
								'F_CreatorUserId': order[i].creatorUser,
								'F_CreatorTime': helper.toDate(order[i].orderDate, "yyyy-MM-dd"),
								'Status': helper.flowStatus(order[i].currentState),
							})
						}
					}
				});
			},
			// 单据升序
			billAsc() {
				this.isBillAsc = true;
				this.$refs.popup.close();
				helper.ajax({
					url: orderUrl,
					method: 'GET',
					data: {
						pageSize: this.rows, //每页行数
						currentPage: 1, //当前页
						sidx: 'F_OrderCode',
						sord: 'asc'
					},
					success: res => {
						this.page = 1;
						let _total = Math.ceil(res.data.data.pagination.total/res.data.data.pagination.pageSize)
						this.total = _total;
						let order = res.data.data.list;
						this.orderList.splice(0);
						this.isBillAsc = false;
						for (let i = 0; i < order.length; i++) {
							this.orderList.push({
								'F_Id': order[i].id,
								'F_OrderCode': order[i].orderCode,
								'F_CustomerName': order[i].customerName,
								'F_SalesmanName': order[i].salesmanName,
								'F_CreatorUserId': order[i].creatorUser,
								'F_CreatorTime': helper.toDate(order[i].orderDate, "yyyy-MM-dd"),
								'Status': helper.flowStatus(order[i].currentState),
							})
						}
					}
				});
			},
			
			/* 单据降序 */
			billDesc() {
				this.isBillDesc = true;
				this.$refs.popup.close();
				helper.ajax({
					url: orderUrl,
					method: 'GET',
					data: {
						pageSize: this.rows, //每页行数
						currentPage: 1, //当前页
						sidx: 'F_OrderCode',
						sord: 'desc'
					},
					success: res => {
						this.page = 1;
						let _total = Math.ceil(res.data.data.pagination.total/res.data.data.pagination.pageSize)
						this.total = _total;
						let order = res.data.data.list;
						this.orderList.splice(0);
						this.isBillDesc = false;
						for (let i = 0; i < order.length; i++) {
							this.orderList.push({
								'F_Id': order[i].id,
								'F_OrderCode': order[i].orderCode,
								'F_CustomerName': order[i].customerName,
								'F_SalesmanName': order[i].salesmanName,
								'F_CreatorUserId': order[i].creatorUser,
								'F_CreatorTime': helper.toDate(order[i].orderDate, "yyyy-MM-dd"),
								'Status': helper.flowStatus(order[i].currentState),
							})
						}
					}
				});
			},
			// 日期升序
			dateAsc() {
				this.isDateAsc = true;
				this.$refs.popup.close();
				helper.ajax({
					url: orderUrl,
					method: 'GET',
					data: {
						pageSize: this.rows, //每页行数
						currentPage: 1, //当前页
						sidx: 'F_OrderDate',
						sord: 'asc'
					},
					success: res => {
						this.page = 1;
						let _total = Math.ceil(res.data.data.pagination.total/res.data.data.pagination.pageSize)
						this.total = _total;
						let order = res.data.data.list;
						this.orderList.splice(0);
						this.isDateAsc = false;
						for (let i = 0; i < order.length; i++) {
							this.orderList.push({
								'F_Id': order[i].id,
								'F_OrderCode': order[i].orderCode,
								'F_CustomerName': order[i].customerName,
								'F_SalesmanName': order[i].salesmanName,
								'F_CreatorUserId': order[i].creatorUser,
								'Status': helper.flowStatus(order[i].currentState),
							})
						}
					}
				});
			},
			// 日期降序
			dateDesc() {
				this.$refs.popup.close();
				helper.ajax({
					url: orderUrl,
					method: 'GET',
					data: {
						pageSize: this.rows, //每页行数
						currentPage: 1, //当前页
						sidx: 'F_OrderDate',
						sord: 'desc'
					},
					success: res => {
						this.page = 1;
						let _total = Math.ceil(res.data.data.pagination.total/res.data.data.pagination.pageSize)
						this.total = _total;
						let order = res.data.data.list;
						this.orderList.splice(0);
						this.isDateDesc = false;
						for (let i = 0; i < order.length; i++) {
							this.orderList.push({
								'F_Id': order[i].id,
								'F_OrderCode': order[i].orderCode,
								'F_CustomerName': order[i].customerName,
								'F_SalesmanName': order[i].salesmanName,
								'F_CreatorUserId': order[i].creatorUser,
								'F_CreatorTime': helper.toDate(order[i].orderDate, "yyyy-MM-dd"),
								'Status': helper.flowStatus(order[i].currentState),
							})
						}
					}
				});
			},
			
			/* 搜索框 */
			searchEvent(e) {
				this.queryJson.keyword = e.detail.value;
				uni.hideKeyboard();
				let form = {
					pageSize: this.rows, //每页行数
					currentPage: 1, //当前页
				}
				if(this.queryJson.startTime){
					form.startTime = Date.parse(this.queryJson.startTime);
				}
				if(this.queryJson.endTime){
					form.endTime = Date.parse(this.queryJson.endTime);
				}
				if(this.queryJson.enabledMark){
					form.enabledMark = this.queryJson.enabledMark;
				}
				if(this.queryJson.keyword){
					form.keyword = this.queryJson.keyword;
				}
				helper.ajax({
					url: orderUrl,
					method: 'GET',
					data: form ,
					success: res => {
						this.page = 1;
						let _total = Math.ceil(res.data.data.pagination.total/res.data.data.pagination.pageSize)
						this.total = _total;
						let order = res.data.data.list;
						this.orderList.splice(0);
						for (let i = 0; i < order.length; i++) {
							this.orderList.push({
								'F_Id': order[i].id,
								'F_OrderCode': order[i].orderCode,
								'F_CustomerName': order[i].customerName,
								'F_SalesmanName': order[i].salesmanName,
								'F_CreatorUserId': order[i].creatorUser,
								'F_CreatorTime': helper.toDate(order[i].orderDate, "yyyy-MM-dd"),
								'Status': helper.flowStatus(order[i].currentState),
							})
						}
					}
				});
			}
		},
		mounted() {
			/* 获取高度 */
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight;
				}
			});
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
	}
	
	/* 底部流程选择 */
	.uni-share {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		background-color: #fff;
	}
	
	.uni-share-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 15px;
	}
	
	
	.uni-share-content-image {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		padding: 20rpx 0;
		overflow: hidden;
		border-radius: 10rpx;
	}
	
	.uni-share-content-text {
		font-size: 26rpx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}
	.uni-share-btn {
		height: 90rpx;
		line-height: 90rpx;
		font-size: 14px;
		border-top-color: #f5f5f5;
		border-top-width: 1px;
		border-top-style: solid;
		text-align: center;
		color: #666;
	}
	
	
	
	
	
	
	.search-input {
		background: #FFFFFF;
		margin-top: 120upx;
	}

	.search-cell {
		margin: 0 auto;
		overflow: hidden;
		height: 100upx;
		align-content: center;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		background-color: #FFFFFF;
		height: 100upx;
	}

	.search-item {
		width: 68%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.screen-btn {
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		color: #999999;
	}

	.screen-btn text {
		padding-right: 10upx;
	}

	.item {
		border-radius: 10upx;
		width: 100%;

		.jn-item-cell {
			padding: 0;
			background-color: #FFFFFF;

			.jn-list-cell {
				padding: 0 20upx;
				margin-bottom: 10upx;
				justify-content: space-between;

				&.cell {
					height: 48upx;
				}
			}
		}

		.head {
			height: 66upx;
			border-bottom: 1upx solid #e5e5e5;
		}
	}

	.popup-box {
		background-color: #fff;
		box-sizing: border-box;
	}

	.staff {
		width: 100%;
		height: 96rpx;
		display: flex;
		background-color: #fff;
		align-items: center;
	}

	.staffinfo {
		width: 91%;
		height: 100%;
		font-size: 28rpx;
		display: flex;
		vertical-align: hiddle;
		margin-left: 30rpx;
		align-items: center;
		justify-content: space-between;
	}

	.staffname {
		width: 30%;
		display: flex;
		white-space: nowrap;
		align-items: center;
		color: #3A3A3A;
		font-size: 32rpx;
	}

	.radio {
		padding-right: 7%;
	}

	picker-view {
		width: 100%;
		height: 396rpx;
		margin-top: 20rpx;
	}

	.picker-item {
		line-height: 100rpx;
		text-align: center;
	}
</style>
